/*
* @Author: Zero
* @Date: 2019-11-14 10:03:55
* @Last Modified by: Zero
* @Last Modified time: 2019-11-14 10:23:06
*/
<template>
  <div class="header data-banner">
    <div class="banner-search">
      <ul class="banner-list clearfix searchType">
        <li v-for="(item, index) in search.tabs" :key="index" @click="searchList(index)"
            :class="{active:search.tabIndex==item.id}">
          {{item.tabName}}
        </li>
      </ul>
      <div class="indexSearchBox">
        <div class="input-group">
          <span class="input-group-btn">
            <i class="inSearchFdj dtFont dtFont-sousuo"></i>
          </span>
          <input type="text" name="search" v-model="search.value" autocomplete="off" :placeholder="placeholder"
                 class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default" @click="goPage">搜索</button>
          </span>
        </div>
      </div>
      <div class="banner-tag">
        <p>热门搜索：
          <a @click="hotInput(index)" v-for="(item, index) in hot" :key="index" href="javascript:;">{{item}}</a>
          <!--<a v-show="search.tabIndex===1" @click="hotInput(index)" v-for="(item, index) in hotSearch.person" :key="index" href="javascript:;">{{item}}</a>-->
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        search: {
          tabIndex: 0,
          tabs: [
            {
              id: 0,
              tabName: "查企业",
              placeholder: "请输入企业名称或统一社会信用代码进行查询",
              url: "/dataService/company",
              hot: ["莒南县建筑设计院", "朝阳市顺达水利工程设计有限公司", "郓城县建筑设计院"],
            },
            {
              id: 1,
              tabName: "查人员",
              placeholder: "请输入人员姓名或证件号码进行查询",
              url: "/dataService/person",
              hot: ["路人甲", "路人乙", "路人丙"]
            }
            /*  {id: 2, tabName: "查项目", placeholder: "请输入项目名称或项目编号查询", url: "/dataService/project"},
             {id: 3, tabName: "查信用", placeholder: "请输入企业名称或统一社会信用代码查询", url: "???"},*/
          ],
          value: ""
        },
        hot:["莒南县建筑设计院", "朝阳市顺达水利工程设计有限公司", "郓城县建筑设计院"]
      }
    },
    methods: {
      searchList(index) {
        this.search.tabIndex = this.search.tabs[index].id
        this.hot=this.search.tabs[index].hot
      },
      goPage() {
        let {tabIndex, tabs, value} = this.search;
        this.$router.push({
          path: tabs[tabIndex].url,
          query: {
            search: value
          }
        });
      },
      hotInput(index) {
        let {tabIndex, tabs, value} = this.search;
        this.$router.push({
          path: tabs[tabIndex].url,
          query: {
            search: this.hot[index]
          }
        });
      }
    },
    computed: {
      placeholder() {
        let {tabIndex, tabs} = this.search;
        return tabs[tabIndex].placeholder;
      }
    }
  }
</script>

<style lang="less" scoped>
  .header {

  }
</style>
